<head>
<link rel="stylesheet" href="/eSDK_OpenAPI_Demo_BS_JAVA/css/tree.css"
	type="text/css">
<link rel="stylesheet" href="/eSDK_OpenAPI_Demo_BS_JAVA/css/zTreeStyle.css"
	type="text/css">
<link rel="stylesheet" href="/eSDK_OpenAPI_Demo_BS_JAVA/css/demo.css"
	type="text/css" />
<link href="/eSDK_OpenAPI_Demo_BS_JAVA/css/thickbox.css" media="screen"
	rel="stylesheet" type="text/css" />
<script type="text/javascript"
	src="/eSDK_OpenAPI_Demo_BS_JAVA/js/jquery-1.8.3.js"></script>
<script type="text/javascript"
	src="/eSDK_OpenAPI_Demo_BS_JAVA/js/jquery.ztree.core-3.5.js"></script>
<script src="/eSDK_OpenAPI_Demo_BS_JAVA/js/en-us.js" type="text/javascript"></script>
<script src="/eSDK_OpenAPI_Demo_BS_JAVA/js/zh-cn.js" type="text/javascript"></script>
<script src="/eSDK_OpenAPI_Demo_BS_JAVA/js/demotools.js"
	type="text/javascript"></script>

<script type="text/javascript">
	function createMappingView() {
		var hostgroup = $("#associateId_hostgroup").val();
		var lungroup = $("#associateId_lungroup").val();
		var portgroup = $("#associateId_portgroup").val();
		$.ajax({
			url : "/eSDK_OpenAPI_Demo_BS_JAVA/openapiServlet",
			type : "post",
			dataType : "json",
			data : "&hostgroup=" + hostgroup + "&lungroup=" + lungroup
					+ "&portgroup=" + portgroup + "&method=createMappingView",
			async : false,
			success : function(data) {
				if ("success" == data) {
					self.parent.tb_remove();
				} else {
					$("#MappingView_status").html(data);
				}
			},
			error : function(data) {
				$("#MappingView_status").html(
						controller.language.titles["operationFailed"]);
			},
			beforeSend : function() {
				$("#MappingView_status").html("");
			}
		});
	}
	function load() {
		changeLang();
		$.ajax({
			url : "/eSDK_OpenAPI_Demo_BS_JAVA/openapiServlet",
			type : "post",
			dataType : "json",
			data : "&method=getBatchHostGroup",
			async : false,
			success : function(data) {
				$.each(data, function(key, value) {
					var Option = document.createElement("OPTION");
					Option.value = key;
					Option.text = value;
					document.getElementById("associateId_hostgroup").options
							.add(Option);
				});
			}
		});
		$.ajax({
			url : "/eSDK_OpenAPI_Demo_BS_JAVA/openapiServlet",
			type : "post",
			dataType : "json",
			data : "&method=getBatchLUNGroup",
			async : false,
			success : function(data) {
				$.each(data, function(key, value) {
					var Option = document.createElement("OPTION");
					Option.value = key;
					Option.text = value;
					document.getElementById("associateId_lungroup").options
							.add(Option);
				});
			}
		});
		$.ajax({
			url : "/eSDK_OpenAPI_Demo_BS_JAVA/openapiServlet",
			type : "post",
			dataType : "json",
			data : "&method=getBatchPortGroup",
			async : false,
			success : function(data) {
				$.each(data, function(key, value) {
					var Option = document.createElement("OPTION");
					Option.value = key;
					Option.text = value;
					document.getElementById("associateId_portgroup").options
							.add(Option);
				});
			}
		});
	}
</script>
</head>
<body onload="load()">
	<div class="inoutput_param_div1">
		<table width="100%">
			<tr>
				<td width="10%"></td>
				<td></td>
				<td width="40%"></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td align="left" width="25%"><font color='red'>*</font> <label
					id="hostgroupMapLabel"></label></td>
				<td align="left"><select id="associateId_hostgroup"
					name="associateId_hostgroup" onmouseover="FixWidth(this)"></td>
				<td align="left"><span class="span_tip" id="hostgroupErrTip">
			</tr>
			<tr>
				<td></td>
				<td align="left"><font color='red'>*</font> <label
					id="lungroupMapLabel"></label></td>
				<td align="left"><select id="associateId_lungroup"
					name="associateId_lungroup" onmouseover="FixWidth(this)">
				</select></td>
			</tr>
			<tr>
				<td></td>
				<td align="left"><font color='white'>*</font> <label
					id="portgroupMapLabel"></label></td>
				<td align="left"><select id="associateId_portgroup"
					name="associateId_portgroup" onmouseover="FixWidth(this)"><option></option></select></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td align="left"><input class="btn"
					onmouseover="this.className='btn_mouseover'"
					onmouseout="this.className='btn'" type="button"
					id="createMappingViewBtn" onclick="createMappingView();"></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td align="left"><label algin="left" id="MappingView_status"
					name="MappingView_status"> </label></td>
				<td></td>
			</tr>
		</table>
	</div>
</body>
